<!doctype html>
<html>
<head>
	<title>Data Reports</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
	<link href='css/bootstrap.min.css' rel="stylesheet" />
	<link href="css/style.css" type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/lang.js" type="text/javascript" charset="utf8"></script>
	<script src="js/common.js" type="text/javascript" charset="utf8"></script>
</head>
<body>

<div class="container">
	<h3>
		DataSource
			<span class="pull-right" style="font-size: 16px; margin-right: 20px;">
				<label langkey="RefreshPeriod" class="lang" style="display: inline;" for="refreshSecondsSelect">Refresh Period</label>
				<select id="refreshSecondsSelect" style="width:80px;" onchange="javascript:druid.index.refreshSeconds=parseInt(this.options[this.options.selectedIndex].value);">
					<option value="5"selected="selected">5s</option>
					<option value="10">10s</option>
					<option value="20">20s</option>
					<option value="30">30s</option>
					<option value="60">60s</option>
				</select>
				<a id="btnSuspendRefresh" langkey="SuspendRefresh" class="btn btn-primary lang" href="javascript:druid.index.switchSuspendRefresh();">Suspend Refresh</a>
			</span>
	</h3>
	<table id="dataTable" class="table table-bordered table-striped responsive-utilities">
		<thead>
		<tr>
			<th>N</th>

			<th><a id="th-configCode" class="lang" langKey="configCode">Code</a></th>
			<th><a id="th-reportName" class="lang" langKey="configName">Name</a></th>
			<th><a id="th-reportType" class="lang" langKey="url">Url</a></th>
			<th><a id="th-status" class="lang" langKey="status">Status</a></th>
			<th align="left" width="100"><span class="lang" langKey="Operate">Operate</span></th>
		</tr>
		</thead>
		<tbody></tbody>
	</table>
</div>
<script type="text/javascript">
	$.namespace("druid.index");
	druid.index = function () {
		return  {
			init : function() {
				$("#dataTable th a").click(function(obj) {
					druid.common.setOrderBy(obj.target.id.substring(3))
				});
				druid.common.buildHead(5);
				druid.common.ajaxuri = 'datasource.json?';
				druid.common.handleCallback = druid.index.handleAjaxResult;
				druid.common.setOrderBy("id");
				druid.index.controlRefresh();
			},
			controlRefresh : function() {
				var FIVE = 5;
				if(!druid.index.refreshSeconds){
					druid.index.refreshSeconds=FIVE;
				}
				if(!druid.index.suspendedSeconds){
					druid.index.suspendedSeconds=0;
				}
				druid.index.suspendedSeconds += FIVE;
				if(!druid.index.disableAutoRefresh){
					if(druid.index.suspendedSeconds >= druid.index.refreshSeconds){
						druid.index.suspendedSeconds = 0;
						druid.common.ajaxRequestForBasicInfo();
					}
				}
				setTimeout(druid.index.controlRefresh, FIVE * 1000);
			},
			switchSuspendRefresh : function() {
				druid.index.disableAutoRefresh = !druid.index.disableAutoRefresh;
				if(druid.index.disableAutoRefresh){
					$("#btnSuspendRefresh").addClass("btn-warning").removeClass("btn-primary");
				} else {
					$("#btnSuspendRefresh").addClass("btn-primary").removeClass("btn-warning");
				}
			},
			disableAutoRefresh : false,
			refreshSeconds : 5,
			suspendedSeconds : 0,

			handleAjaxResult : function(data) {
				var statList = data.Content;
				if(statList == null) return;

				var sqlStatTable = document.getElementById("dataTable");
				while (sqlStatTable.rows.length > 1) {
					sqlStatTable.deleteRow(1);
				}

				var html = "";
				for ( var i = 0; i < statList.length; i++) {
					var stat = statList[i];
					var newRow = sqlStatTable.insertRow(-1);
					html += "<tr>";
					html += "<td>" + (i + 1) + "</td>";
					html += "<td>" + stat.configCode + "</td>";
					html += "<td>" + '<a data-dismiss="alert" target="_blank" href="report-detail.html?reportId=' + stat.id + '">' + stat.configName + '</a>' + "</td>";
					html += "<td>" + stat.url + "</td>";
                    html += "<td>" + stat.status + "</td>";
					html += "<td>" +
							'<a style="margin:5px;" data-dismiss="alert" target="_blank" href="report-delete.json?reportId=' + stat.id + '">删除</a>'+
							"</td>";
					html += "</tr>";
				}
				$("#dataTable tbody").html(html);
				druid.common.stripes();
			}
		}
	}();

	$(document).ready(function() {
		druid.index.init();
	});
</script>
</body>
</html>
